﻿@{
    ViewBag.Title = "Form";
    Layout = "~/Views/Shared/_ManufactureList.cshtml";
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>材料分类管理</title>
    <link href="~/Content/css/MaterialCategory.css" rel="stylesheet" />

    <script type="text/javascript">
        var zTreeObj;

        $(function () {
            with (Index) {
                Index.init();

                $("#butnDelete").on("click", function () {
                    confirm("此操作不可逆，是否仍然执行删除操作？", function () {
                        var cols = "MaterialNO".split(",");

                        var params = {};

                        for (var idx in cols) {
                            params[cols[idx]] = $("[name={0}]".format(cols[idx])).val();
                        }

                        $.post("/BOM/MaterialQuota/DeleteTreeData", { param: JSON.stringify(params) },
                        function (res) {
                            !!res.status && (function () {
                                alert(res.err_msg);
                            })();

                            !!res.status || (function () {
                                0 <= res.content && alert("删除成功");

                                Index.init();
                            })();
                        }, "json");
                    });
                });

                $("#butnPlus").on("click", function () {
                    var cur = $(this), curStatus = Index.editStatus;
                    0 == curStatus && (function () {
                        !!Index.curNodeData && 2 > Index.curNodeData.LevelSign && (function () {
                            cur.addClass("butn_common_active");

                            Index.editStatus = 1;

                            $(".butn_confirm label").text("新增");

                            $("*[name]:not([readonly],[type=hidden])").val("");

                            $("[name=parentID]").val();
                        })();

                    })();

                    1 == curStatus && (function () {
                        cur.removeClass("butn_common_active");

                        Index.editStatus = 0;

                        $(".butn_confirm label").text("修改");
                    })();
                });

                $(".butn_confirm").on("click", function () {
                    //当前状态为编辑
                    0 == Index.editStatus && (function () {
                        var cols = "MaterialID,MaterialNO,MaterialName,MaterialExplain".split(",");

                        var params = {};

                        for (var idx in cols) {
                            params[cols[idx]] = $("[name={0}]".format(cols[idx])).val();
                        }

                        $.post("/BOM/MaterialQuota/UpdateTreeData", { param: JSON.stringify(params) },
                        function (res) {
                            !!res.status && (function () {
                                alert(res.err_msg);
                            })();

                            !!res.status || (function () {
                                0 <= res.content && alert("修改成功");

                                Index.init();
                            })();
                        }, "json");
                    })();

                    //当前状态为新增
                    1 == Index.editStatus && (function () {
                        var cols = "MaterialID,MaterialNO,MaterialName,MaterialExplain".split(",");

                        var params = {};

                        for (var idx in cols) {
                            params[cols[idx]] = $("[name={0}]".format(cols[idx])).val();
                        }

                        $.post("/BOM/MaterialQuota/AddTreeData", { param: JSON.stringify(params) },
                        function (res) {
                            !!res.status && (function () {
                                alert(res.err_msg);
                            })();

                            !!res.status || (function () {
                                0 <= res.content && alert("添加成功");

                                Index.init();
                            })();
                        }, "json");
                    })();
                });
            }
        });

        var Index = {
            orgData: null,
            renderData: null,
            curNodeData: null,
            editStatus: 0,
            init:function(){
                with (Index) {
                    loadData(function (data) {
                        orgData = data;

                        var treeData = buildTreeData(data);

                        renderData = treeData;

                        renderTree(treeData);
                    });
                }
            },
            loadData: function (onloadComplate) {
                $.get("/BOM/MaterialQuota/GetTreeData", function (res) {
                    !!onloadComplate && onloadComplate(res);
                }, "json");
            },
            renderTree: function (treeData) {
                var zTreeOnClick = function (event, treeId, treeNode) {
                    //当前状态为编辑时可选择节点
                    0 == Index.editStatus && (function () {
                        Index.curNodeData = treeNode;

                        2 == treeNode.level && (function () {
                            var parentNode = $.grep(Index.orgData, function (n, i) {
                                return n.MaterialID == treeNode.parentID;
                            });

                            $("[name=categoryLevel2]").val(parentNode[0].name);

                            $("[name=categoryLevel1]").val("材料分类");
                        })();

                        1 == treeNode.level && (function () {
                            $("[name=categoryLevel2]").val("材料分类");
                            $("[name=categoryLevel1]").val("");
                        })();

                        0 == treeNode.level && (function () {
                            $("[name=categoryLevel2]").val("");
                            $("[name=categoryLevel1]").val("材料分类");
                        })();

                        for (var idx in treeNode) {
                            $("[name={0}]".format(idx)).val(treeNode[idx]);

                            /.+DateTime$/g.test(idx) && (function () {
                                $("[name={0}]".format(idx)).val(new Date(treeNode[idx] * 1000).format("yyyy-MM-dd hh:mm:ss"));
                            })();
                        }

                        Index.editStatus = 1;

                        $("#butnPlus").trigger("click");
                    })();

                    

                };

                var setting = {
                    callback: {
                        onClick: zTreeOnClick
                    }
                };

                zTreeObj = $.fn.zTree.init($("#tree"), setting, treeData);
            },
            buildTreeData: function (data) {
                var treeData = [];

                var convertData = function (data, pid) {
                    var list = [];

                    list = $.grep(data, function (n, i) {
                        return n.parentID == pid;
                    });

                    list.forEach(function (cur) {
                        cur["name"] = cur.MaterialName;
                        cur["open"] = true;
                        cur["children"] = convertData(data, cur.MaterialID);
                    });

                    return list;
                }

                treeData.push({ name: "材料分类", MaterialNO: "", MaterialName: "", MaterialID: "0", MaterialExplain:"",LevelSign: 0, open: true, children: convertData(data, 0) });

                return treeData;
            }
        };

        String.prototype.format = function () {
            var params = [].slice.apply(arguments);
            //Array.prototype.slice.apply
            var cur = this;

            1 == params.length && "object" == typeof params[0] && (params = params[0]);

            for (var idx in params) {
                var item = params[idx];

                (cur = cur.replace(new RegExp("({)" + idx + "(})", "gm"), item));
            }

            return cur;
        }

        Date.prototype.format = function (fmt) { //author: meizz 
            var o = {
                "M+": this.getMonth() + 1, //月份 
                "d+": this.getDate(), //日 
                "h+": this.getHours(), //小时 
                "m+": this.getMinutes(), //分 
                "s+": this.getSeconds(), //秒 
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
                "S": this.getMilliseconds() //毫秒 
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }

        window.confirm = function (msg, onDeside) {
            var ocDis, winSize, dSize, offset, template, html = "", delay = 100;

            !!msg && (msg = msg.toString());

            template = "<div id=\"alertDialog\"><p class=\"content\">{0}</p><div class=\"button_c\"><button class=\"butn_confirm\">确定</button><button class=\"butn_cancel\">取消</button></div></div><div class=\"alertDialog_bg\"></div>";

            html = template.format(msg);

            $("body").append(html);

            docDis = { t: $(document).scrollTop(), l: $(document).scrollLeft() };

            winSize = { w: $(window).innerWidth(), h: $(window).innerHeight() };

            dSize = { w: $("#alertDialog").width(), h: $("#alertDialog").height() };

            offset = { left: docDis.l + (winSize.w - dSize.w) / 2, top: docDis.t + (winSize.h - dSize.h) / 2 };

            $(".alertDialog_bg").width(winSize.w).height(winSize.h).css({ left: docDis.l, top: docDis.t });

            $(".alertDialog_bg").fadeIn(300, function () {
                $("#alertDialog").slideDown(300);
            });

            $("#alertDialog").animate({ top: offset.top }, delay, function () {
                $(this).animate({ left: offset.left }, delay, function () {

                });
            });

            $("#alertDialog .butn_confirm").on("click", function () {
                $("#alertDialog").slideUp(delay, function () {
                    $(this).remove();

                    $(".alertDialog_bg").fadeOut(delay, function () {
                        $(this).remove();

                        !!onDeside && onDeside();
                    });
                });
            });

            $("#alertDialog  .butn_cancel").on("click", function () {
                $("#alertDialog").slideUp(delay, function () {
                    $(this).remove();

                    $(".alertDialog_bg").fadeOut(delay, function () {
                        $(this).remove();
                    });
                });
            });
        }

        window.alert = function (msg) {
            var ocDis, winSize, dSize, offset, template, html = "", delay = 100;

            !!msg && (msg = msg.toString());

            template = "<div id=\"alertDialog\"><p class=\"content\">{0}</p><div class=\"button_c button_c_only\"><button class=\"butn_confirm\">确定</button><button class=\"butn_cancel\">取消</button></div></div><div class=\"alertDialog_bg\"></div>";

            html = template.format(msg);

            $("body").append(html);

            docDis = { t: $(document).scrollTop(), l: $(document).scrollLeft() };

            winSize = { w: $(window).innerWidth(), h: $(window).innerHeight() };

            dSize = { w: $("#alertDialog").width(), h: $("#alertDialog").height() };

            offset = { left: docDis.l + (winSize.w - dSize.w) / 2, top: docDis.t + (winSize.h - dSize.h) / 2 };

            $(".alertDialog_bg").width(winSize.w).height(winSize.h).css({ left: docDis.l, top: docDis.t });

            $(".alertDialog_bg").fadeIn(300, function () {
                $("#alertDialog").slideDown(300);
            });

            $("#alertDialog").animate({ top: offset.top }, delay, function () {
                $(this).animate({ left: offset.left }, delay, function () {

                });
            });

            $("#alertDialog .butn_confirm").on("click", function () {
                $("#alertDialog").slideUp(delay, function () {
                    $(this).remove();

                    $(".alertDialog_bg").fadeOut(delay, function () {
                        $(this).remove();
                    });
                });
            });
        }

    </script>

</head>
<body>
    <div id="wrapper">
        <header>
            <div class="f_r">
                <button class="butn_common">
                    <span class="glyphicon glyphicon-refresh"></span>刷新
                </button>
                <button id="butnPlus" class="butn_common">
                    <span class="glyphicon glyphicon-plus"></span>新增
                </button>
                <button id="butnDelete" class="butn_common">
                    <span class="glyphicon glyphicon-edit"></span>删除
                </button>
                <button class="butn_common">
                    <span class="glyphicon glyphicon-download"></span>修改
                </button>
            </div>
        </header>
        <section class="c_contaner">
            <div class="tree_c">
                <ul id="tree" class="ztree"></ul>
            </div>
            <aside>
                <div class="sec">
                    <h2>材料分类</h2>
                    <ul class="sec_list">
                        <li class="sec_item">
                            <h3 class="sec_item_title">一级分类
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="categoryLevel1" readonly="readonly" type="text" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title">二级分类
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="categoryLevel2" readonly="readonly" type="text" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="sec">
                    <h2>详情</h2>
                    <ul class="sec_list">
                        <li class="sec_item">
                            <h3 class="sec_item_title">材料编码
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="MaterialNO" type="text" />
                                <input name="MaterialID" type="hidden" />
                                <input name="parentID" type="hidden" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title">材料名称
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="MaterialName" type="text" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title sec_item_muti_title">材料描述
                            </h3>
                            <div class="sec_item_muti_input_c">
                                <textarea name="MaterialExplain" cols="20" rows="3"></textarea>
                            </div>
                        </li>


                    </ul>
                </div>
                <div class="sec">
                    <h2>其它</h2>
                    <ul class="sec_list">
                        <li class="sec_item">
                            <h3 class="sec_item_title">最近更新者
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="FCreateBy" type="text" readonly="readonly" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title">创建时间
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="FCreateDateTime" type="text" readonly="readonly" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title">创建者
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="FUpdateBy" type="text" readonly="readonly" />
                            </div>
                        </li>
                        <li class="sec_item">
                            <h3 class="sec_item_title">最近更新时间
                            </h3>
                            <div class="sec_item_input_c">
                                <input name="FUpdateDateTime" type="text" readonly="readonly" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="sec sec_bt">
                    <button class="butn_confirm">
                        <span class="glyphicon glyphicon-ok"></span>
                        <label>修改</label></button>
                </div>
            </aside>
        </section>
    </div>
</body>
</html>
